<template>
  <div class="h-full overflow-y-auto">
    <PageHeader :title="$t('setting.店铺设置')" />
    <LangTabs v-model="lang" />

    <!-- 店铺基本信息 -->
    <div class="titleRow pl10 mb20">{{$t('setting.店铺基本信息')}}</div>
    <el-table
      :data="basicInfoData"
      class="cover-table mb30"
      :show-header="false"
      style="width: 100%"
      border
      v-loading="loading"
    >
      <el-table-column prop="name" width="300px">
        <template #default="{ row }">
          <div class="flex justify-end">{{ row.name }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="value">
        <template #default="{ row }">
          <div style="width: 100%" class="text-left">
            <div v-if="row.key === 'shopName'">
              <el-input
                v-model="formData['name' + lang]"
                style="width: 300px"
                :disabled="originTenantInfo['name' + lang]?.length>0"
                :placeholder="$t('setting.请输入')"
              />
              <div class="fs-12 color-999999">
                {{$t('setting.注店铺名称只能设置一次设置后不可更改')}}
              </div>
            </div>
            <div v-if="row.key === 'mainSku'">
              <el-input
                v-model="formData['mainSku' + lang]"
                type="textarea"
                :rows="2"
                style="width: 300px"
                :placeholder="$t('setting.请输入店铺主营商品关键字')"
              />
              <div class="fs-12 color-999999">
                {{$t(`setting.请输入店铺主营商品关键字，如需填写多个商品，请用英文符号“，”进行分割，如“戒指，项链，耳环”，最多可输入50字。主要在移动端店铺信息页展示`)}}
              </div>
            </div>
            <div v-if="row.key === 'shopLogo'">
              <UploadFile
                v-model="formData.shopLogo"
                limit="1"
                :show-tip="false"
              />
              <div class="fs-12 color-999999">
                {{$t('setting.建议上传宽130像素高130像素的图片')}}
              </div>
            </div>
            <div v-if="row.key === 'shopPhone'">
              <el-input
                v-model="formData.shopPhone"
                style="width: 300px"
                :placeholder="$t('setting.请输入用于交易联系的电话号码')"
              />
              <div class="fs-12 color-999999">
                {{$t('setting.请输入用于交易联系的邮箱方便买家进行咨询沟通')}}
              </div>
            </div>
            <div v-if="row.key === 'shopEmail'">
              <el-input
                v-model="formData.shopEmail"
                style="width: 300px"
                :placeholder="$t('setting.请输入用于交易联系的邮箱')"
              />
              <div class="fs-12 color-999999">
                {{$t('setting.请输入用于交易联系的邮箱方便买家进行咨询沟通')}}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 底部操作按钮 -->
    <div class="action-buttons">
      <!-- <el-button type="primary" @click="handleTranslate">翻译</el-button> -->
      <el-button type="primary" @click="handleSave">{{$t('setting.保存')}}</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import UploadFile from "@/components/UploadFile.vue";
import Api from "@/config/api/api";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
import LangTabs from "@/components/langTabs.vue";
import { getLangs } from "@/i18n/tools";

const { locale, t } = useI18n();
const tenantInfo = ref({});
const originTenantInfo = ref({})
const lang = ref(locale.value);
const loading = ref(false)

// 店铺基本信息数据
const basicInfoData = ref([
  {
    name: t('setting.店铺名称'),
    key: "shopName",
  },
  {
    name: t('setting.主营商品'),
    key: "mainSku",
  },
  {
    name: t('setting.店铺Logo'),
    key: "shopLogo",
  },
  {
    name: t('setting.店铺客服电话'),
    key: "shopPhone",
  },
  {
    name: t('setting.店铺邮箱'),
    key: "shopEmail",
  },
]);

// 商家结算信息数据
const settlementData = ref([
  {
    name: t('setting.账户名称'),
    key: "settlementName",
  },
  {
    name: t('setting.账号'),
    key: "settlementAccount",
  },
  {
    name: t('setting.开户银行信息'),
    key: "settlementBank",
  },
  {
    name: t('setting.开户行号'),
    key: "settlementBankNo",
  },
]);

// 商家退货信息数据
const returnData = ref([
  {
    name: t('setting.收件人姓名'),
    key: "returnName",
  },
  {
    name: t('setting.联系电话'),
    key: "returnPhone",
  },
  {
    name: t('setting.详细地址'),
    key: "returnAddress",
  },
]);

// 表单数据对象，映射到接口字段
const formData = ref({
  // 店铺基本信息
  shopLogo: [],
  shopPhone: "",
  shopEmail: "",

  // 商家结算信息
  // settlementName: "",
  // settlementAccount: "",
  // settlementBank: "",
  // settlementBankNo: "",

  // 商家退货信息
  // returnNameZhCN: "",
  // returnNameEnUS: "",
  // returnNameRuRU: "",
  // returnNameKz: "",
  // returnPhone: "",
  // returnAddressZhCN: "",
  // returnAddressEnUS: "",
  // returnAddressRuRU: "",
  // returnAddressKz: "",
});

const handleSave = async () => {
  try {
    // 构建提交参数
    const params = {
      logo: formData.value.shopLogo?.[0]?.url || "",
      servicePhone: formData.value.shopPhone,
      serviceEmail: formData.value.shopEmail,
      // accountName: formData.value.settlementName,
      // accountNo: formData.value.settlementAccount,
      // accountBankName: formData.value.settlementBank,
      // accountBankCode: formData.value.settlementBankNo,
      // refundNameZhCN: formData.value.returnNameZhCN,
      // refundNameEnUS: formData.value.returnNameEnUS,
      // refundNameRuRU: formData.value.returnNameRuRU,
      // refundNameKz: formData.value.returnNameKz,
      // refundPhone: formData.value.returnPhone,
      // refundAddressZhCN: formData.value.returnAddressZhCN,
      // refundAddressEnUS: formData.value.returnAddressEnUS,
      // refundAddressRuRU: formData.value.returnAddressRuRU,
      // refundAddressKz: formData.value.returnAddressKz,
    };
    getLangs().forEach((lang) => {
      params['name' + lang] = formData.value['name' + lang]
      params['mainSku' + lang] = formData.value['mainSku' + lang]
    })

    // 这里应该调用你的API保存数据
    const res = await Api.tenant_center_config(params);
    if (res.status == 200) {
      ElMessage.success(t('setting.保存成功'));
      getTenantInfo()
    }
  } catch (error) {
    ElMessage.error(t('setting.保存失败，请重试'));
  }
};

// 获取商户信息
const getTenantInfo = async () => {
  loading.value = true
  try {
    // 模拟API调用获取真实商户信息
    const res = await Api.tenant_current();
    const merchantInfo = res.data;

    // 更新商户信息
    tenantInfo.value = {
      ...merchantInfo,
    };
    originTenantInfo.value = merchantInfo

    // 将API返回数据映射到表单数据
    formData.value = {
      // 店铺基本信息
      shopLogo: merchantInfo.logo ? [{ url: merchantInfo.logo }] : [],
      shopPhone: merchantInfo.servicePhone,
      shopEmail: merchantInfo.serviceEmail,

      // 商家结算信息
      // settlementName: merchantInfo.accountName,
      // settlementAccount: merchantInfo.accountNo,
      // settlementBank: merchantInfo.accountBankName,
      // settlementBankNo: merchantInfo.accountBankCode,

      // 商家退货信息
      // returnNameZhCN: merchantInfo.refundNameZhCN,
      // returnNameEnUS: merchantInfo.refundNameEnUS,
      // returnNameRuRU: merchantInfo.refundNameRuRU,
      // returnNameKz: merchantInfo.refundNameKz,
      // returnPhone: merchantInfo.refundPhone,
      // returnAddressZhCN: merchantInfo.refundAddressZhCN,
      // returnAddressEnUS: merchantInfo.refundAddressEnUS,
      // returnAddressRuRU: merchantInfo.refundAddressRuRU,
      // returnAddressKz: merchantInfo.refundAddressKz,
    };

    getLangs().forEach((lang) => {
      formData.value['name' + lang] = merchantInfo['name' + lang]
      formData.value['mainSku' + lang] = merchantInfo['mainSku' + lang]
    })
  } catch (error) {
    ElMessage.error(t('setting.获取商户信息失败请重试'));
  } finally {
    loading.value = false
  }
};

onMounted(() => {
  getTenantInfo();
});
</script>
<style scoped lang="scss">
.titleRow {
  width: 100%;
  height: 36px;
  border-radius: 2px;
  background: rgba(255, 120, 45, 0.05);
  line-height: 36px;
  font-weight: 500;
  color: #333;
  font-size: 16px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb30 {
  margin-bottom: 30px;
}

.action-buttons {
  margin-top: 20px;
  text-align: center;
  padding: 20px 0;
}
</style>
